// 写的代码就是webpack的配置信息，所有的配置项都在这里面开始写
const path = require("path") //Nodejs提供模块，可以获取到项目目录的绝对路径
const HtmlWebpackPlugin = require("html-webpack-plugin")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const webpack = require("webpack")

module.exports = {
    mode:"development",  //配置打包的模式。production：生产模式 developmenet：开发模式
    entry:{
        index:"./src/js/index.js",
        login:"./src/js/login.js"
    },
    output:{
        // __dirname nodejs里面的全局的变量，获取当前文件目录
        path:path.resolve(__dirname,"dist"),  //将项目中index.js文件打包后放在dist文件夹下面
        filename:"js/[name].js"
    },
    module:{
        rules:[
            {
                test:/\.css$/i, //寻找以.css结尾的文件
                exclude:/node_modules/,
                use:[MiniCssExtractPlugin.loader,"css-loader"]
            },
            {
                test:/\.scss$/i, //寻找以.css结尾的文件
                exclude:/node_modules/,
                use:[MiniCssExtractPlugin.loader,"css-loader","sass-loader"]
            },
            // 用于压缩和配置css和js中的图片 js和css文件中图片
            {
                test:/\.(png|jpg|jpeg|gif|svg|webp)$/i, //寻找以.css结尾的文件
                exclude:/node_modules/,
                use:{
                    loader:"url-loader",
                    options:{
                        limit:1024 * 10, //图片小于10kb的时候。默认将图片转化为base64位编码
                        outputPath:"./images/",
                        esModule:false  //图片这个插件和其他会出现冲突。设置位false可以避免冲突
                    }
                }
            },
            // 打包html文件中的img
            {
                test:/.(html|htm)$/i,
                use:["html-withimg-loader"]
            }
        ]
    },
    plugins:[
        new webpack.ProvidePlugin({
            "$":"jquery"
        }),
        new HtmlWebpackPlugin({
            template:"./src/index.html", //代表默认要打包的文件路径
            filename:"index.html", //要打包的文件名字
            chunks:["index"] //对应的这个html文件默认引入对应同名js文件
        }),
        new HtmlWebpackPlugin({
            template:"./src/login.html", //代表默认要打包的文件路径
            filename:"login.html", //要打包的文件名字
            chunks:["login"] //对应的这个html文件默认引入对应同名js文件
        }),
        new MiniCssExtractPlugin({
            filename:"./css/[name].css"
        })
    ]
}